<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center coursePro_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }" v-if="bbb">
				<view class='flex flex-wrap align-center justify-between flex-sub coursePro_fd0_0'>
					<view class='flex flex-wrap align-center coursePro_fd0_0_c0'>
						<text class='fu-iconfont2  coursePro_fd0_0_c0_c00012' @tap.stop="handleJumpDiy" data-type="back"
							data-url="1">&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='coursePro_fd0_0_c1_c0'>课程</text>
					</view>
					<view class='flex flex-wrap align-center justify-end coursePro_fd0_0_c0'>
					</view>
				</view>
			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}" v-if="bbb"></view>
			<view class="flex benben-position-layout flex flex-wrap align-center coursePro_flex_0123456"
				:style="{height:(StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }" v-if="!bbb">
				<view class='flex flex-wrap align-center justify-between flex-sub coursePro_fd0_0'>
					<view class='flex flex-wrap align-center coursePro_fd0_0_c0'>
						<text class='fu-iconfont2  coursePro_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
							data-url="1">&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='coursePro_fd0_0_c1_c0'></text>
					</view>
					<view class='flex flex-wrap align-center justify-end coursePro_fd0_0_c0'>
					</view>
				</view>
			</view>
			<view :style="{height: (StatusBarRpx)+'rpx'}" v-if="!bbb"></view>
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center coursePro_flex_1">
				<image class='coursePro_fd1_0' mode="aspectFill" :src='list.cover'></image>
				<view style="position: absolute; top: 26rpx; left: 32rpx;">
					<text class='fu-iconfont2  coursePro_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1">&#xE794;</text>
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout coursePro_flex_2">
				<view class='flex flex-direction flex-wrap align-stretch coursePro_fd2_0'>
					<text class='coursePro_fd2_0_c0'>{{list.name}}</text>
					<view class='flex flex-wrap align-center'>
						<view class="text1-outer">
							<text>{{$t('共')}}</text>
							<text>{{list.class_period}}</text>
							<text>{{$t('课时')}}</text>
						</view>

						<text class='coursePro_fd2_0_c1_c0'>{{$t('授课教师：')}}</text>
						<text v-if="list.teacher_name && list.teacher_name.length"
							class='coursePro_fd2_0_c1_c0'>{{list.teacher_name[0].nickname}}</text>

						<view class="jilu-outer">
							<view class="jilu-item" @click="jump">
								<image src="@/static/img02/02.png" alt="" />
								<text>错题记录 </text>
							</view>
							<view class="jilu-item">
								<image src="@/static/img02/03.png" alt="" />
								<text>学习记录 </text>
							</view>
							<view class="jilu-item">
								<image src="@/static/img02/04.png" alt="" />
								<text>智能推荐 </text>
							</view>
						</view>
					</view>
				</view>
				<u-sticky :offsetTop="StatusBarRpx">
					<view class='flex flex-direction flex-wrap align-stretch coursePro_fd2_1'>
						<benben-flex-tabs class-name='coursePro_benbenTabsfd2_1_c0' v-model="tabsVal"
							ref="benben_tabsfd2_1_c0" select-mark="benben_tabsfd2_1_c0" key="benben_tabsfd2_1_c0"
							:open-title-type='false' :open-sticky='false' :top='0' :is-show-content='false'
							:scrollspy='false' :tabs-info.sync="tabsInfofd2_1_c0" @change="getjf6f236d491017Func()">
							<scroll-view @scroll="tabsInfofd2_1_c0.scrollX = $event.detail.scrollLeft"
								id="benben_tabsfd2_1_c0" class="benben-tabs" style="width:100%" :scroll-x="true"
								:scroll-left="tabsInfofd2_1_c0.moveX" scroll-with-animation="all .3s ease">
								<view class="benben-tabs-content" id="benben_tabsfd2_1_c0-content">
									<view id="benben_tabsfd2_1_c0-title"
										class="benben-tabs-title flex align-center justify-around flex ">
										<template v-for='(item,key0) in tabs'>
											<view :key='key0' :class="[
												  tabsVal == item.value ? 'checkTitlefd2_1_c0' : 'checkTitlefd2_1_c0-other',
												  'flex flex-wrap align-center'
												]" @tap="tabsVal = item.value" :id="`benben_tabsfd2_1_c0-title-item-${item.value}`">

												<text>{{item.name}}</text>

											</view>
										</template>
									</view>
									<view
										:style="{ left: tabsInfofd2_1_c0.lineleft, maxWidth: tabsInfofd2_1_c0.lineWidth ,}"
										id="benben_tabsfd2_1_c0-line"
										class="benben-tabs-line flex benben-flex-tabs-line coursePro_linefd2_1_c0"
										:class="{'benben-tabs-line-active':tabsInfofd2_1_c0.isInit}"></view>
								</view>
							</scroll-view>
						</benben-flex-tabs>
					</view>
				</u-sticky>
				<view class='coursePro_fd2_2'>
					<!-- 课时任务 -->
					<view
						:style="{ minHeight: `calc(100vh - 88rpx - 88rpx - 110rpx - ${StatusBarRpx}rpx - var(--window-bottom))` }"
						class='flex flex-direction renwu-test' v-if=" tabsVal=='1'">
						<template v-for='(item,key0) in CourseTimeList'>
							<view class='flex flex-wrap align-center coursePro_fd2_2_c0_c0' :key='key0'>
								<view class=' flex flex-wrap align-start coursePro_fd2_2_c0_c0_c0'>
									<text :style="{ color: item.teaching_status == 2 ? '#145EFD' : '' }"
										class='coursePro_fd2_2_c0_c0_c0_c0'>{{key0+1}}</text>
								</view>
								<view class='flex flex-wrap justify-between flex-sub coursePro_fd2_2_c0_c0_c1'>
									<view class=' coursePro_fd2_2_c0_c0_c1_c0' style="margin-top: 30rpx;">
										<text :style="{ color: item.teaching_status == 2 ? '#145EFD' : '' }"
											class='coursePro_fd2_2_c0_c0_c1_c0_c0'>{{item.lessonplanning_class_hour_name}}</text>
									</view>
									<view style="margin-top: -25rpx;">
										<text :style="{ color: item.teaching_status == 2 ? '#145EFD' : '' }"
											class='coursePro_fd2_2_c0_c0_c1_c1_c1'>{{$t('上课时间：')}}</text>
										<text :style="{ color: item.teaching_status == 2 ? '#145EFD' : '' }"
											class='coursePro_fd2_2_c0_c0_c1_c1_c1'>{{item.class_time}}</text>
									</view>

									<!-- 授课中 -->
									<button class='coursePro_fd2_2_c0_c0_c3' v-if=" item.teaching_status=='2'"
										@tap.stop="handleJumpDiy" data-type="navigateTo"
										:data-url="`/pages/course/instructioning/instructioning?teaching_id=${item.aid}&lessonplanning_id=${item.lessonplanning_id}&time=${item.class_time}`">{{$t('授课中')}}</button>
									<!-- 已结束 -->
									<button class='coursePro_fd2_2_c0_c0_c2' @tap.stop="handleJumpDiy"
										data-type="navigateTo"
										:data-url="`/pages/course/classhourPar/classhourPar?teaching_id=${item.aid}&lessonplanning_id=${item.lessonplanning_id}&time=${item.class_time}&teaching_status=${item.teaching_status}`"
										v-if=" item.teaching_status=='3'">{{$t('已结束')}}</button>
									<!-- 未开课 -->
									<button class='coursePro_fd2_2_c0_c0_c4' @tap.stop="handleJumpDiy"
										data-type="navigateTo"
										:data-url="`/pages/course/classhourPar/classhourPar?teaching_id=${item.aid}&lessonplanning_id=${item.lessonplanning_id}&time=${item.class_time}&teaching_status=${item.teaching_status}`"
										v-if=" item.teaching_status=='1'">{{$t('未开课')}}</button>
								</view>
							</view>
						</template>
						<fu-empty :pagingListLoadedAll="pagingListLoadedAll"
							:pagingListNoListData="pagingListNoListData" :listDataLength="listDataLength"
							:isLoadInit="isLoadInit"></fu-empty>
					</view>

					<!-- 知识图谱 -->
					<view :style="{ height: `calc(100vh - 88rpx - 88rpx - ${StatusBarRpx}rpx - var(--window-bottom))` }"
						class='flex flex-wrap align-center coursePro-tupu' v-if=" tabsVal=='2'">
						<div class="total">
							<span style="font-size:26rpx;margin-left: 24rpx;">知识点进度：</span>
							<span style="font-size:32rpx; color: #3771FB;font-weight:bold;">{{numObj.jindu}}</span>
							<span style="font-size:26rpx;">/{{numObj.total_num }}</span>

							<view class='flex flex-wrap align-center'>
								<view class='flex benben-progress-bar MyPortrayal_fd1_7_c1_c0_c1_c0'>
									<view class='benben-progress-bar-center MyPortrayal_progress1_fd1_7_c1_c0_c1_c0'
										:style="{width: numObj.jindu+'%'}">
									</view>
								</view>
								<view class="number">
									{{ ((numObj.total_num > 0 ? numObj.jindu / numObj.total_num : 0) * 100).toFixed(1) }}%
								</view>
							</view>
						</div>
						<!-- <view class='flex flex-wrap align-center justify-between flex-sub searchs_fd0_0_ben'>
							<view class='flex flex-wrap align-center flex-sub searchs_fd0_0_c1_ben'>
								<image class='searchs_fd0_0_c1_c0_ben' mode="aspectFit" :src='STATIC_URL+"serse.png"'>
								</image>
								<benben-input class='flex-sub searchs_fd0_0_c1_c1_ben' type="text"
									:placeholder="$t('搜索')" confirm-type="done" :maxlength="-1"
									placeholder-style="color:#999;font-size:28rpx" @confirm="addSearchHistoryFunc()"
									v-model="KeyWord" />
							</view>
						</view> -->

						<MyComponent :course="course" @myEvent="handleChildData"></MyComponent>
					</view>


					<!-- 课程章节 -->
					<view class='coursePro-zhangjie'
						:style="{ minHeight: `calc(100vh - 88rpx - 110rpx - ${StatusBarRpx}rpx - var(--window-bottom))` }"
						v-if=" tabsVal=='3'">
						<div class="total">
							<span style="font-size:26rpx;margin-left: 24rpx;">知识点进度：</span>
							<span style="font-size:32rpx; color: #3771FB;font-weight:bold;">{{numObj2.jindu}}</span>
							<span style="font-size:26rpx;">/{{numObj2.total_num }}</span>

							<view class='flex flex-wrap align-center'>
								<view class='flex benben-progress-bar MyPortrayal_fd1_7_c1_c0_c1_c0'>
									<view class='benben-progress-bar-center MyPortrayal_progress1_fd1_7_c1_c0_c1_c0'
										:style="{width: numObj2.jindu+'%'}">
									</view>
								</view>
								<view class="number">
									{{ ((numObj2.total_num > 0 ? numObj2.jindu / numObj2.total_num : 0) * 100).toFixed(1) }}%
								</view>
							</view>
						</div>
						<chartList :course="course" @myEvent="handleChildData2"></chartList>
					</view>

					<!-- 课程实验 -->
					<view class='coursePro-zhangjie'
						:style="{ minHeight: `calc(100vh - 88rpx - 110rpx - ${StatusBarRpx}rpx - var(--window-bottom))` }"
						v-if=" tabsVal=='4'">
						<div class="total">
							<span style="font-size:26rpx;margin-left: 24rpx;">实验进度：</span>
							<span
								style="font-size:32rpx; color: #3771FB;font-weight:bold;">{{numObj3.completeNum}}</span>
							<span style="font-size:26rpx;">/{{numObj3.arrL}}</span>

							<view class='flex flex-wrap align-center'>
								<view class='flex benben-progress-bar MyPortrayal_fd1_7_c1_c0_c1_c0'>
									<view class='benben-progress-bar-center MyPortrayal_progress1_fd1_7_c1_c0_c1_c0'
										:style="{width: (numObj3.completeNum / numObj3.arrL) * 100+'%'}">
									</view>
								</view>
								<view class="number">
									{{ numObj3.arrL ? ((numObj3.completeNum / numObj3.arrL) * 100).toFixed(2) : '0.00' }}%
								</view>
							</view>
						</div>
						<ExperimentList :course="course" @myEvent="handleChildData3"></ExperimentList>
					</view>
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<view class="flex benben-position-layout flex flex-wrap align-center coursePro_flex_3" v-if=" tabsVal=='1'"
				:style="{height:(110+bottomSafeAreaRpx)+'rpx',paddingBottom:bottomSafeAreaRpx+'rpx', }">
				<button class='coursePro_fd3_0' @tap.stop="startclassFunc()">开始上课</button>
			</view>
			<view :style="{height: (110+bottomSafeAreaRpx)+'rpx'}" v-if=" tabsVal=='1'"></view>
		</view>
	</page-body>
</template>
<script>
	import pagingList from '@/common/mixin/paging_list.js';
	import MyComponent from "./MyComponent.vue";
	import chartList from "./list.vue";
	import ExperimentList from "./experimentList.vue"
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {
			MyComponent,
			chartList,
			ExperimentList
		},
		mixins: [pagingList],

		data() {
			return {
				"tabsInfofd2_1_c0": {
					lineleft: '',
					lineWidth: '',
					moveX: 0,
					scrollX: 0,
					PageScrollX: 0,
					isInit: false
				},
				"bbb": false,
				"KeyWord": '',
				"text": "",
				"minixPagingListsApi": "",
				"pageingListApiMethod": "",
				"allowOnloadGetList": false,
				"tabs": [{
					"name": "课时任务",
					"value": "1",
					"image": ""
				}, {
					"name": "知识图谱",
					"value": "2",
					"image": ""
				}, {
					"name": "课程章节",
					"value": "3",
					"image": ""
				}, {
					"name": "课程实验",
					"value": "4",
					"image": ""
				}],
				"tabsVal": "1",
				"tabsLab": "",
				"list": {
					"name": "",
					"cover": "",
					"textbook_name": "",
					"course_details": "",
					"course_objectives": "",
					"teacher": "",
					"academic_year": "",
					"basemajor_name": "",
					"semester": "",
					"class_period": "",
					"duration_schedule": "",
					"aid": ""
				},
				"CourseTimeList": [],
				"course": "1",
				"numObj": {}, //谱图进度
				"numObj2": {}, //章节进度
				"numObj3": {
					completeNum: 0,
					arrL: 0
				}, //实验进度

			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			let {
				course
			} = options
			if (course !== undefined) this.course = course
			this.getjf6f236d491017Func()
			this.getld6f25aec6e2a9Func()


			this.get_course_chapterApi() //判断有没有课程实验，没有就隐藏
		},
		onUnload() {

		},
		onPageScroll(e) {
			console.log(e);
			if (e.scrollTop >= 200) {
				this.bbb = true
			} else {
				this.bbb = false
			}


		},
		methods: {
			//判断有没有课程实验， 没有就隐藏
			async get_course_chapterApi() {
				let res = await this.$api.post(global.apiUrls.post6843b550611e8, {
					courseplan_id: this.course,
				})

				if (res.data.code == 1) {
					if (res.data.data.length == 0) {
						this.tabs.pop()
					}
				}
			},
			// 知识图谱
			handleChildData(data) {
				this.numObj = data
			},
			// 课程章节
			handleChildData2(data) {
				this.numObj2 = data
			},
			//实验
			handleChildData3(data) {
				this.numObj3.completeNum = data.filter(item => item.trainings_status?.trainings_status == 3)
					.length || 0
				this.numObj3.arrL = data.length
			},
			async jump(val) {
				//错题数量
				const res1 = await this.$api.get(global.apiUrls.post67735544acf41, {});

				if (!res1.data.data.count) {
					this.$message.info(global.i18n.t('暂无错题'))
					return
				}
				uni.navigateTo({
					url: "/pages/tabBar/wrongQuestion/wrongQuestion?type=2"
				})
			},
			addSearchHistoryFunc() {},
			//APP接口-查看课程详情
			async getjf6f236d491017Func() {
				//请求方法
				//数据验证

				let datalist = await this.$api.get(global.apiUrls.post66f236d491017, {
					aid: this.course
				});

				if (datalist.data.code != 1) {
					this.$message.info(datalist.data.msg);
					return
				}
				let infolist = datalist.data;
				this.list = infolist.data

			},
			//APP接口-获取课时列表
			getld6f25aec6e2a9Func() {
				this.minixPagingListsApi = global.apiUrls.post66f25aec6e2a9;
				this.pageingListApiMethod = 'get';
				this.allowOnloadGetList = false;
				this.pagingListPostDataContent = {
					courseplan_id: this.course
				}
				this.listData = [];
				this.CourseTimeList = this.listData;

				let judge = false;

				this.CourseTimeList.forEach(item => {
					if (item.teaching_status == 1) {
						judge = true
					}
				})
				if (judge) {
					this.text = "开始上课"
				} else {
					this.text = "课前预习"
				}


				this.pagingListToggle();
			},
			//开始上课
			startclassFunc() {
				let id = null;
				let time = null
				let aid = null
				let status = null
				this.CourseTimeList.forEach(item => {
					if (item.teaching_status == 2) {
						id = item.lessonplanning_id
						status = item.teaching_status
					}
				})

				if (status == '2') {
					this.$urouter.navigateTo(
						`/pages/course/instructioning/instructioning?lessonplanning_id=${id}`
					);
				}
			},
			pagingListPostData() {
				return this.pagingListPostDataContent
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;
	}

	.coursePro_flex_0 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 12;
		top: 0rpx;
		background: #fff;
	}

	.coursePro_flex_0123456 {
		width: 750rpx;
		overflow: hidden;
		z-index: 12;
		top: 0rpx;
		background: #fff;
	}

	.coursePro_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		line-height: 50rpx;
	}

	.coursePro_fd0_0_c0_c00012 {
		font-size: 36rpx;
		color: #333;
	}

	.coursePro_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: var(--benbenFontColor3);
	}

	.coursePro_fd0_0_c0 {
		width: 120rpx;
	}

	.coursePro_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.coursePro_flex_1 {
		height: 524rpx;
		position: relative;
		// margin: -150rpx 0rpx 0rpx 0rpx;
	}

	.coursePro_fd1_0 {
		width: 100%;
		height: 100%;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.coursePro_flex_2 {
		position: relative;
	}

	::v-deep .coursePro_fd2_2_c1_c0 {
		width: 100%;
	}

	.coursePro_fd2_2_c1 {
		padding: 32rpx 24rpx 32rpx 024rpx;
	}

	.coursePro-tupu {
		overflow: hidden;
		padding: 0 24rpx 0 24rpx;
		display: flex;
		flex-direction: column;

		.total {
			width: 100%;
			height: 88rpx;
			background: #F4F8FD;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 1rpx solid rgba(0, 0, 0, 0);
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
		}
	}

	.coursePro-zhangjie {
		.total {
			// width: 100%;
			height: 88rpx;
			background: #F4F8FD;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 1rpx solid rgba(0, 0, 0, 0);
			display: flex;
			align-items: center;
			margin: 30rpx 24rpx 32rpx 24rpx;
		}
	}

	.coursePro_fd2_2_c0_c0_c4 {
		background: rgba(20, 94, 253, .1);
		border-radius: 33rpx 33rpx 33rpx 33rpx;
		width: 123rpx;
		height: 56rpx;
		line-height: 56rpx;
		font-size: 24rpx;
		color: rgba(20, 94, 253, 1);
		margin-top: -55rpx;
	}

	.coursePro_fd2_2_c0_c0_c3 {
		background: #145efd;
		border-radius: 33rpx 33rpx 33rpx 33rpx;
		width: 123rpx;
		height: 56rpx;
		line-height: 56rpx;
		font-size: 26rpx;
		margin-top: -55rpx;
		color: var(--benbenFontColor3);
	}

	.coursePro_fd2_2_c0_c0_c2 {
		width: 123rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 28rpx;
		border: 1rpx solid #949AAB;
		font-weight: 400;
		font-size: 26rpx;
		margin-top: -55rpx;
		color: #949AAB;
	}

	.coursePro_fd2_2_c0_c0_c1_c1_c1 {
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
		font-weight: 400;
	}

	.coursePro_fd2_2_c0_c0_c1_c1_c0 {
		width: 24rpx;
		height: 24rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.coursePro_fd2_2_c0_c0_c1_c0_c0 {
		margin: 0rpx 16rpx 0rpx 0rpx;
		line-height: 42rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: rgba(51, 51, 51, 1);
		width: 100%;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.coursePro_fd2_2_c0_c0_c1_c0 {
		width: 100%;
	}

	.coursePro_fd2_2_c0_c0_c1 {
		border-bottom: 1px solid #EEEEEE;
		height: 148rpx;
	}

	.coursePro_fd2_2_c0_c0_c0_c0 {
		margin: 1rpx 16rpx 0rpx 0rpx;
		line-height: 42rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: rgba(51, 51, 51, 1);
	}

	.coursePro_fd2_2_c0_c0_c0 {
		height: 94rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #131D34;
	}

	.coursePro_fd2_2_c0_c0 {
		height: 148rpx;
	}

	.text-blue {
		color: #145efd;
	}

	.renwu-test {
		padding: 0 24rpx 32rpx 24rpx;
	}

	// 最外层
	.coursePro_fd2_2 {
		background: var(--benbenbgColor1);
		// padding: 0 24rpx 32rpx 24rpx;
		background-size: 100% auto;
		border-radius: 32rpx;
	}

	.coursePro_linefd2_1_c0 {
		background: rgba(20, 94, 253, 1);
		width: 104rpx;
		height: 4rpx;
		top: 87rpx;
		border-radius: 16rpx;
	}

	.checkTitlefd2_1_c0 {
		font-weight: 600 !important;
		font-size: 30rpx !important;
		color: #131D34 !important;
		background-color: rgba(255, 255, 255, 1) !important;
	}

	.checkTitlefd2_1_c0-other {
		font-weight: 400;
		font-size: 30rpx;
		color: #747E96;
	}

	::v-deep .coursePro_benbenTabsfd2_1_c0 {
		background: #fff;
		width: 100%;
		height: 90rpx;
		white-space: nowrap;
		text-align: center;
	}

	.coursePro_fd2_1 {
		margin-top: 8rpx;
		height: 92rpx;
		background-color: #EEEEEE;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.coursePro_fd2_0_c1_c3 {
		background: #999999;
		width: 1rpx;
		height: 30rpx;
		margin: 0rpx 16rpx 0rpx 16rpx;
		transform: scaleX(0.5);
	}

	.coursePro_fd2_0_c1_c0 {
		color: rgba(153, 153, 153, 1);
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
	}

	.jilu-outer {
		margin: 44rpx 0;
		width: 100%;
		display: flex;
		justify-content: space-around;

		.jilu-item {
			display: flex;
			width: 100rpx;
			flex-direction: column;
			align-items: center;

			image {
				width: 56rpx;
				height: 62rpx;
				margin-bottom: 15rpx;
			}

			text {
				line-height: 33rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #131D34;
			}
		}
	}

	.coursePro_fd2_0_c0 {
		margin: 24rpx 0rpx 26rpx 0rpx;
		color: #333333;
		font-size: 34rpx;
		font-weight: 600;
		line-height: 45rpx;
	}

	.text1-outer {
		line-height: 37rpx;
		padding: 2rpx 20rpx;
		background: #E7EEFE;
		border-radius: 26rpx;
		font-size: 26rpx;
		color: #145EFD;
		margin-right: 10rpx;
	}

	.coursePro_fd2_0 {
		padding: 0 24rpx 0 24rpx;
		background-color: #fff;

	}

	.coursePro_flex_3 {
		width: 750rpx;
		height: 110rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		background-color: #fff;
	}

	.coursePro_fd3_0 {
		background: #145efd;
		width: 450rpx;
		height: 64rpx;
		line-height: 64rpx;
		font-size: 30rpx;
		color: #fff;
		border-radius: 44rpx;
		margin: 0 auto
	}


	searchs_flex_0_ben {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.searchs_fd0_0_c2_ben {
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
		margin: -5rpx 0rpx 0rpx 24rpx;
	}

	.searchs_fd0_0_c1_c1_ben {
		margin: 10rpx 0rpx 0rpx 24rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
	}

	.searchs_fd0_0_c1_c0_ben {
		margin: -4rpx 0rpx 0rpx 0rpx;
		width: 28rpx;
		height: 28rpx;
	}

	.searchs_fd0_0_c1_ben {
		background: rgba(249, 249, 249, 1);
		background-size: 100% auto !important;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		margin: 0rpx 0rpx 0rpx 24rpx;
		padding: 0rpx 24rpx 0rpx 24rpx;

		width: 494rpx;
		height: 56rpx;
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		border: 1rpx solid #EEEEEE;
	}

	.searchs_fd0_0_c0_ben {
		font-size: 36rpx;
		color: #333;
		font-weight: 500;
	}

	.searchs_fd0_0_ben {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.searchs_flex_1_ben {
		padding: 24rpx 24rpx 0rpx 24rpx;
	}

	.searchs_fd1_2_ben {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}

	.searchs_fd1_1_c0_c0_ben {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.searchs_fd1_1_c0_ben {
		background: var(--benbenbgColor5);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		background-size: 100% auto !important;
		padding: 0rpx 40rpx 0rpx 40rpx;
		line-height: 56rpx;
		margin: 0rpx 22rpx 24rpx 0rpx;
	}

	.searchs_fd1_0_c2_ben {
		width: 32rpx;
		height: 32rpx;
		margin: 0rpx 0rpx 0rpx auto;
	}

	.searchs_fd1_0_c1_ben {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.searchs_fd1_0_c0_ben {
		background: rgba(20, 94, 253, 1);
		width: 6rpx;
		height: 27rpx;
		background-size: 100% auto;
		border-radius: 8rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.searchs_fd1_0_ben {
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.searchs_flex_2_ben {
		background: #fff;
		margin: 0rpx 105rpx 0rpx 105rpx;
		background-size: #eee;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		padding: 40rpx 0rpx 0rpx 0rpx;
	}

	.searchs_fd2_2_c1_ben {
		background: transparent;
		line-height: 110rpx;
		border-radius: 0rpx 0rpx 16rpx 0rpx;
		font-size: 32rpx;
		color: var(--benbenFontColor7);
		width: 269rpx;
		height: 110rpx;
	}

	.searchs_fd2_2_c0_ben {
		border-right: 1px solid #EEEEEE;
		background: transparent;
		line-height: 110rpx;
		border-radius: 0rpx 0rpx 0rpx 16rpx;
		font-size: 32rpx;
		color: var(--benbenFontColor2);
		height: 110rpx;
		width: 270rpx;
	}

	.searchs_fd2_2_ben {
		border-top: 1px solid #eee;
	}

	.searchs_fd2_1_ben {
		font-size: 32rpx;
		font-weight: 400;
		line-height: 52rpx;
		color: #333333;
		margin: 40rpx 0rpx 39rpx 0rpx;
	}

	.searchs_fd2_0_ben {
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 45rpx;
	}

	.MyPortrayal_fd1_7_c1_c0_c1_c0 {
		background: #fff;
		width: 300rpx;
		height: 28rpx;
		border-radius: 14rpx;
		background-size: 100% auto;
		margin-left: 44rpx;

		.MyPortrayal_progress1_fd1_7_c1_c0_c1_c0 {
			background: linear-gradient(90deg, #6E9CFF 0%, #145EFD 100%);
			border-radius: 14rpx;
		}


	}

	.number {
		font-weight: 500;
		font-size: 20rpx;
		color: #145EFD;
		line-height: 28rpx;
		font-weight: 500;
		margin-left: 10rpx;
	}
</style>